<template>
    <div class="app_content">
        <el-form :model="queryParams" ref="queryRef" :inline="true" :size="size"  v-show="showSearch" label-width="68px">
            <el-form-item label="对象id" prop="objectId">
                <el-input
                    v-model="queryParams.objectId"
                    placeholder="请输入对象id"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="英文名称" prop="nameEn">
                <el-input
                    v-model="queryParams.nameEn"
                    placeholder="请输入英文名称"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="中文名称" prop="nameCn">
                <el-input
                    v-model="queryParams.nameCn"
                    placeholder="请输入中文名称"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="数据库字段名" prop="dbFieldName">
                <el-input
                    v-model="queryParams.dbFieldName"
                    placeholder="请输入数据库字段名"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="长度" prop="length">
                <el-input
                    v-model="queryParams.length"
                    placeholder="请输入长度"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="是否唯一" prop="only">
                <el-input
                    v-model="queryParams.only"
                    placeholder="请输入是否唯一"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="是否必需" prop="require">
                <el-input
                    v-model="queryParams.require"
                    placeholder="请输入是否必需"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="创建时间" prop="createDate">
                <el-date-picker clearable
                        v-model="queryParams.createDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择创建时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="修改时间" prop="updateDate">
                <el-date-picker clearable
                        v-model="queryParams.updateDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择修改时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="旧字段名" prop="rName">
                <el-input
                    v-model="queryParams.rName"
                    placeholder="请输入旧字段名"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input
                    v-model="queryParams.sort"
                    placeholder="请输入排序"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                 <el-button type="primary" @click="handleQuery">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-search'"/>
          搜索</el-button>
        <el-button   @click="resetQuery">
          <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-redo'"/>
          重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    @click="handleAdd"
                    v-hasRole="['lowcode:dataattribute:add']">
                 <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-add-one'"/>
                新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasRole="['lowcode:dataattribute:edit']">
                <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-edit-one'"/>
                修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasRole="['lowcode:dataattribute:remove']">
                 <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-delete-five'"/>
                删除
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :border="$border" :height="maxHeight" :size="size" :data="dataattributeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="${comment}" align="center" prop="id" width="80"/>
            <el-table-column label="对象id" align="center" prop="objectId"/>
            <el-table-column label="英文名称" align="center" prop="nameEn"/>
            <el-table-column label="中文名称" align="center" prop="nameCn"/>
            <el-table-column label="数据库字段名" align="center" prop="dbFieldName"/>
            <el-table-column label="数据类型" align="center" prop="dataType"/>
            <el-table-column label="长度" align="center" prop="length"/>
            <el-table-column label="是否唯一" align="center" prop="only"/>
            <el-table-column label="是否必需" align="center" prop="require"/>
            <el-table-column label="创建时间" align="center" prop="createDate" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="修改时间" align="center" prop="updateDate" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.updateDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="旧字段名" align="center" prop="rName"/>
            <el-table-column label="状态" align="center" prop="status"/>
            <el-table-column label="显示类型" align="center" prop="showType"/>
            <el-table-column label="排序" align="center" prop="sort"/>
            <el-table-column label="页面配置" align="center" prop="formconfig"/>
            <el-table-column label="操作" align="center" >
                <template #default="scope">
                    <el-button
                        type="text"
                        @click="handleUpdate(scope.row)"
                        v-hasRole="['lowcode:dataattribute:edit']">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-edit-one'"/>
                    修改
                    </el-button>
                    <el-button
                        type="text"
                        @click="handleDelete(scope.row)"
                        v-hasRole="['lowcode:dataattribute:remove']">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-delete-five'"/>
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top:10px;position: absolute;right: 0;margin-right:20px">
            <el-pagination
                    v-model:currentPage="queryParams.pageNum"
                    v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!-- 添加或修改数据对象属性对话框 -->
        <!-- <el-dialog  v-model="open" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="680px" append-to-body draggable :fullscreen="fullscreen">
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <span :id="titleId" :class="titleClass">{{title}}</span>
                    <div>
                        <component
                                style="cursor:pointer;line-height: 24px;margin-right:10px;"
                                v-if="fullscreen==false"
                                @click="fullscreen=true"
                                class="menu-icon"
                                theme="outline"
                                size="14"
                                strokeWidth="3"
                                :is="'icon-full-screen-one'"
                        />
                        <component
                                v-else
                                style="cursor:pointer;line-height: 24px;margin-right:10px;"
                                @click="fullscreen=false"
                                class="menu-icon"
                                theme="outline"
                                size="14"
                                strokeWidth="3"
                                :is="'icon-off-screen-one'"
                        />
                        <component
                                style="cursor:pointer;line-height: 24px;"
                                @click="cancel"
                                class="menu-icon"
                                theme="outline"
                                size="14"
                                strokeWidth="3"
                                :is="'icon-close'"
                        />
                    </div>

                </div>
            </template>
            <el-form ref="dataattributeRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="对象id" prop="objectId">
                    <el-input v-model="form.objectId" placeholder="请输入对象id"/>
                </el-form-item>
                <el-form-item label="英文名称" prop="nameEn">
                    <el-input v-model="form.nameEn" placeholder="请输入英文名称"/>
                </el-form-item>
                <el-form-item label="中文名称" prop="nameCn">
                    <el-input v-model="form.nameCn" placeholder="请输入中文名称"/>
                </el-form-item>
                <el-form-item label="数据库字段名" prop="dbFieldName">
                    <el-input v-model="form.dbFieldName" placeholder="请输入数据库字段名"/>
                </el-form-item>
                <el-form-item label="长度" prop="length">
                    <el-input v-model="form.length" placeholder="请输入长度"/>
                </el-form-item>
                <el-form-item label="是否唯一" prop="only">
                    <el-input v-model="form.only" placeholder="请输入是否唯一"/>
                </el-form-item>
                <el-form-item label="是否必需" prop="require">
                    <el-input v-model="form.require" placeholder="请输入是否必需"/>
                </el-form-item>
                <el-form-item label="创建时间" prop="createDate">
                    <el-date-picker clearable
                                    v-model="form.createDate"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择创建时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="修改时间" prop="updateDate">
                    <el-date-picker clearable
                                    v-model="form.updateDate"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择修改时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="旧字段名" prop="rName">
                    <el-input v-model="form.rName" placeholder="请输入旧字段名"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入排序"/>
                </el-form-item>
                <el-form-item label="页面配置" prop="formconfig">
                    <el-input v-model="form.formconfig" type="textarea" placeholder="请输入内容"/>
                </el-form-item>

            </el-form>
            <template #footer>
                <div  class="dialog-footer">
                    <el-button type="primary" @click="submitForm" :size="size">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>
                    确 定</el-button>
                    <el-button @click="cancel" :size="size">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-return'"/>
                    取 消</el-button>
                </div>
            </template>
        </el-dialog> -->
        <el-drawer
                :title="title"
                v-model="open"
                direction="rtl"
                destroy-on-close
                size="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="dataattributeRef" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="对象id" prop="objectId">
                        <el-input v-model="form.objectId" placeholder="请输入对象id"/>
                    </el-form-item>
                    <el-form-item label="英文名称" prop="nameEn">
                        <el-input v-model="form.nameEn" placeholder="请输入英文名称"/>
                    </el-form-item>
                    <el-form-item label="中文名称" prop="nameCn">
                        <el-input v-model="form.nameCn" placeholder="请输入中文名称"/>
                    </el-form-item>
                    <el-form-item label="数据库字段名" prop="dbFieldName">
                        <el-input v-model="form.dbFieldName" placeholder="请输入数据库字段名"/>
                    </el-form-item>
                    <el-form-item label="长度" prop="length">
                        <el-input v-model="form.length" placeholder="请输入长度"/>
                    </el-form-item>
                    <el-form-item label="是否唯一" prop="only">
                        <el-input v-model="form.only" placeholder="请输入是否唯一"/>
                    </el-form-item>
                    <el-form-item label="是否必需" prop="require">
                        <el-input v-model="form.require" placeholder="请输入是否必需"/>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="createDate">
                        <el-date-picker clearable
                                        v-model="form.createDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="请选择创建时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="修改时间" prop="updateDate">
                        <el-date-picker clearable
                                        v-model="form.updateDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="请选择修改时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="旧字段名" prop="rName">
                        <el-input v-model="form.rName" placeholder="请输入旧字段名"/>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="form.sort" placeholder="请输入排序"/>
                    </el-form-item>
                    <el-form-item label="页面配置" prop="formconfig">
                        <el-input v-model="form.formconfig" type="textarea" placeholder="请输入内容"/>
                    </el-form-item>

            </el-form>
            <template #footer>
                <div  class="dialog-footer">
                    <el-button type="primary" @click="submitForm" :size="size">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>
                    确 定</el-button>
                    <el-button @click="cancel" :size="size">
                    <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-return'"/>
                    取 消</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script >
    import {
        listDataattribute,
        getDataattribute,
        delDataattribute,
        addDataattribute,
        updateDataattribute } from "@/api/lowcode/dataattribute";
    import { computed, ref ,reactive,onMounted,getCurrentInstance,toRefs, nextTick} from 'vue'
    import { useStore } from 'vuex';
    import { useI18n } from 'vue-i18n';
    export default defineComponent({
        components: {},
        setup() {
            const {proxy} = getCurrentInstance();
            const store = useStore();
          const { t } = useI18n();
            const queryRef=ref(null)
            const dataattributeRef=ref(null)
            const staticData = reactive({
                dataattributeList:[],
                open: false,
                loading: true,
                showSearch: true,
                background: false,
                disabled: false,
                //是否全屏
                fullscreen: false,
                maxHeight:document.body.clientHeight - 320,
                ids: [],
                single: true,
                multiple: true,
                total: 0,
                title: "",
                form: {},
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    objectId: null,
                    nameEn: null,
                    nameCn: null,
                    dbFieldName: null,
                    dataType: null,
                    length: null,
                    only: null,
                    require: null,
                    createDate: null,
                    updateDate: null,
                    rName: null,
                    status: null,
                    showType: null,
                    sort: null,
                    formconfig: null,
                },
                rules: {
                    require: [
                        {required: true, message: "是否必需不能为空", trigger: "blur" }
                    ],
                },
                // 列信息
                columns: []
            });
            const size = computed(() => {
                return store.getters['setting/size'];
            });
            const small =computed(() => {
                return size.value=='small'?true:false
            });
            onMounted(() => {
                proxy.getList()
            });
            /**
             * 重置表单效验方法
             */
            const resetForm = (formEl) => {
                if (!formEl.value) return
                formEl.value.resetFields()
            };
            const methods = {
                /** 查询数据对象属性列表 */
                 getList() {
                    staticData.loading = true;
                    listDataattribute(staticData.queryParams).then(response => {
                        staticData.dataattributeList = response.rows;
                        staticData.total = response.total;
                        staticData.loading = false;
                    });
                },

                // 取消按钮
                cancel() {
                    staticData.open = false;
                    proxy.reset();
                },

                // 表单重置
                reset() {
                    staticData.formData = {
                            id: null,
                            objectId: null,
                            nameEn: null,
                            nameCn: null,
                            dbFieldName: null,
                            dataType: null,
                            length: null,
                            only: null,
                            require: null,
                            createDate: null,
                            updateDate: null,
                            rName: null,
                            status: "0",
                            showType: null,
                            sort: null,
                            formconfig: null,
                            createBy: null,
                            createTime: null,
                            updateBy: null,
                            updateTime: null
                    };
                    resetForm("dataattributeRef")
                },
                /**
                 * 显示或隐藏搜索条件
                 **/
                showSearchClick(data) {
                    staticData.showSearch = data;
                },
                /** 搜索按钮操作 */
                handleQuery() {
                    staticData.queryParams.pageNum = 1;
                    proxy.getList();
                },

                /** 重置按钮操作 */
                resetQuery() {
                    queryRef.value.resetFields();
                    proxy.handleQuery();
                },

                // 多选框选中数据
                handleSelectionChange(selection) {
                    staticData.ids = selection.map(item => item.id);
                    staticData.single = selection.length != 1;
                    staticData.multiple = !selection.length;
                },

                /** 新增按钮操作 */
                handleAdd() {
                    proxy.reset();
                    staticData.open = true;
                    staticData.title = "添加数据对象属性";
                },

                /** 修改按钮操作 */
                handleUpdate(row) {
                    proxy.reset();
                    const _id = row.id || staticData.ids
                    getDataattribute(_id).then(response => {
                        staticData.form = response.data;
                        staticData.open = true;
                        staticData.title = "修改数据对象属性";
                    });
                },

                /** 提交按钮 */
                submitForm() {
                    dataattributeRef.value.validate(valid => {
                    if (valid) {
                        if (staticData.form.id!=null){
                            updateDataattribute
                            (staticData.form).then(response => {
                                proxy.Success("修改成功");
                                staticData.open = false;
                                proxy.getList();
                            });
                        }
                    else
                        {
                            addDataattribute(staticData.form).then(response => {
                                proxy.Success("新增成功");
                                staticData.open = false;
                                proxy.getList();
                            });
                            }
                        }
                    });
                },

                /** 删除按钮操作 */
                handleDelete(row) {
                    const _ids = row.id|| staticData.ids;
                    ElMessageBox.confirm('是否确认删除数据对象属性编号为"' +  _ids + '"的数据项？', t('confirm.title'), {
                        confirmButtonText: t('btn.confirm'),
                        cancelButtonText: t('btn.cancel'),
                        type: "warning"
                    })
                            .then(function() {
                                return delDataattribute(_ids);
                            }).then(() => {
                        proxy.getList();
                        proxy.Success("删除成功");
                    }).catch(() => {});
                },
                handleSizeChange (val) {
                    console.log(`${val} items per page`)
                    staticData.queryParams.pageSize =val;
                    proxy.getList()
                },
                handleCurrentChange(val){
                    console.log(`current page: ${val}`)
                    staticData.queryParams.pageNum =val;
                    proxy.getList()
                },
            }
            return {
                size,
                small,
                queryRef,
                dataattributeRef,
                ...methods,
                ...toRefs(staticData)
            }
        }
    })
</script>
<style scoped>
    .app_content{

        margin-top: 30px;
        margin-left: 10px;
    }
    .mb8{
        margin-bottom: 10px;
    }

</style>
